<template>
<div>
  <el-table :data="list" max-height="500" @selection-change="handleSelectionChange" border>
    <el-table-column type="selection" fixed="left"></el-table-column>
    <!-- 索引 -->
    <el-table-column type="index" width="50" align="center" key="index" fixed="left"></el-table-column>
    <el-table-column
      label="建议执行组织"
      prop="bizOrgName"
      key="bizOrgId"
      show-overflow-tooltip
      align="center"
      width="120px"
    ></el-table-column>
    <el-table-column
      label="实际分配执行组织"
      prop="actualBizOrgName"
      key="actualBizOrgId"
      show-overflow-tooltip
      width="130px"
      align="center"
    ></el-table-column>
    <el-table-column
      label="作业类型"
      prop="operatingUnitName"
      key="operatingUnit"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column
      label="分单号"
      prop="officialOrderItemNo"
      key="officialOrderItemNo"
      width="120"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column
      label="意向/返单号"
      prop="returnOrderCode"
      show-overflow-tooltip
      width="120"
      align="center"
    ></el-table-column>
    <el-table-column
      label="行业产品类别"
      prop="categoryName"
      key="category"
      show-overflow-tooltip
      width="100px"
      align="center"
    ></el-table-column>
    <el-table-column
      label="客户产品名称"
      prop="mdProjectItem.prodNameCust"
      key="prodNameCust"
      width="100px"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column label="数量" prop="qty" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column label="FOB单价" prop="fobAmount" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column label="金额" prop="amount" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column label="拖柜时间" prop="towingTime" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column label="单位料" prop="singleProductMaterial" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column label="单位工" prop="singleProductLabor" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column
      label="订单类型"
      prop="officialOrderTypeName"
      key="officialOrderType"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column
      label="核价单号"
      prop="verifyReqItemNo"
      width="120px"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column label="报价单号" prop="quoteProdNo" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column
      label="定向单号"
      prop="proofOrderItemNo"
      width="120px"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column
      label="混装产品编码"
      prop="mixProdCode"
      width="120px"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column
      label="主项编码"
      prop="mdProjectItem.projectItemNo"
      key="projectItemNo"
      width="100px"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <!-- <el-table-column label="产品类别" prop="mdProjectItem.prodTypeDictName" key="prodTypeDictName" width="100px" show-overflow-tooltip align="center"></el-table-column> -->
    <el-table-column label="研发留样" prop="researchSample" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column label="PO号" prop="poCode" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column label="DI PO#" prop="diPo" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column label="DI Item#" prop="diItem" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column
      label="展示盒编码"
      prop="displayBoxCode"
      show-overflow-tooltip
      width="90px"
      align="center"
    ></el-table-column>
    <el-table-column
      label="是否需测试"
      prop="isNeedTestName"
      key="isNeedTest"
      show-overflow-tooltip
      width="90px"
      align="center"
    ></el-table-column>
    <el-table-column
      label="客户产品编码"
      prop="mdProjectItem.prodCodeCust"
      key="prodCodeCust"
      width="100px"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column label="HS编码" prop="hsCode" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column
      label="是否商检"
      prop="isCommodityInspectionName"
      key="isCommodityInspection"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column
      label="客户产品英文名称"
      prop="mdProjectItem.prodNameCustEn"
      width="130px"
      key="prodNameCustEn"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column label="大货留样" prop="sampleRetention" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column label="计量单位" prop="unitName" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column
      label="报价产品类别"
      prop="quoteCateName"
      key="quoteCate"
      show-overflow-tooltip
      width="100px"
      align="center"
    ></el-table-column>
    <el-table-column
      label="新产品"
      prop="newProdName"
      key="newProd"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column label="待定项目" prop="indeterminateProject" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column
      label="资讯确认时间"
      prop="confirmTime"
      show-overflow-tooltip
      width="100px"
      align="center"
    ></el-table-column>
    <el-table-column label="是否含PU" prop="isPuName" key="isPu" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column
      label="大货样时间"
      prop="sampleRetentionTime"
      show-overflow-tooltip
      width="90px"
      align="center"
    ></el-table-column>
    <el-table-column
      label="是否含PVC"
      prop="isPvcName"
      key="isPvc"
      show-overflow-tooltip
      width="90px"
      align="center"
    ></el-table-column>
    <el-table-column label="测试时间" prop="testTime" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column
      label="是否含金属"
      prop="isMetalName"
      key="isMetal"
      show-overflow-tooltip
      width="90px"
      align="center"
    ></el-table-column>
    <el-table-column
      label="中包装"
      prop="mdProjectItem.prodPack"
      key="prodPack"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column
      label="外包装"
      prop="mdProjectItem.outPack"
      key="outPack"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column
      label="项目主项备注"
      prop="mdProjectItem.remark"
      key="remark"
      show-overflow-tooltip
      width="100px"
      align="center"
    ></el-table-column>
    <el-table-column label="物料代码" prop="matCode" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column
      label="产品名称编码"
      prop="prodNameCode"
      show-overflow-tooltip
      width="100px"
      align="center"
    ></el-table-column>
    <el-table-column label="冻结数量" prop="freezeNum" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column
      label="已出货数量"
      prop="shippedNum"
      show-overflow-tooltip
      width="90px"
      align="center"
    ></el-table-column>
    <el-table-column label="剩余数量" prop="remainNum" show-overflow-tooltip align="center"></el-table-column>
    <!--  <el-table-column label="是否关闭" prop="isCloseName" key="isClose" show-overflow-tooltip align="center"></el-table-column> -->
    <el-table-column
      label="有无资料袋"
      prop="isInfoBagName"
      key="isInfoBag"
      show-overflow-tooltip
      width="90px"
      align="center"
    ></el-table-column>
    <el-table-column
      label="是否返单"
      prop="isReturnOrderName"
      key="isReturnOrder"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column
      label="是否备案"
      prop="isFilingName"
      key="isFiling"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <el-table-column label="备案日期" prop="filingDate" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column label="备案人员" prop="filingUser" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column
      label="shutterstock备案"
      prop="shutterstockFiling"
      show-overflow-tooltip
      width="130px"
      align="center"
    ></el-table-column>
    <el-table-column
      label="设计负责人"
      prop="designPrincipalName"
      key="designPrincipal"
      show-overflow-tooltip
      width="90px"
      align="center"
    ></el-table-column>
    <el-table-column
      label="开发组织"
      prop="developOrgName"
      key="developOrgId"
      show-overflow-tooltip
      align="center"
    ></el-table-column>
    <!-- 新增作业类型 -->
    <!-- <el-table-column label="报价模型" prop="quoteModel" show-overflow-tooltip align="center"></el-table-column> -->
    <el-table-column
      label="不可免抵税的退税差率t"
      prop="ntfTaxRebateRate"
      key="ntfTaxRebateRate"
      show-overflow-tooltip
      width="150px"
      align="center"
    ></el-table-column>
    <el-table-column label="外销单价" prop="exportPrice" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column label="外销总价" prop="exportAmount" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column label="费用名称" prop="feeName" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column label="费用金额" prop="feeAmount" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column
      label="本币报价（模型）"
      prop="localCurrencyQuoteModel"
      show-overflow-tooltip
      width="130px"
      align="center"
    ></el-table-column>
    <el-table-column label="模型加成" prop="additionModel" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column label="模型价" prop="modelPrice" show-overflow-tooltip align="center"></el-table-column>
    <el-table-column label="模型差异" show-overflow-tooltip align="center">
      <template slot-scope="scope">
        <span>{{scope.row.modelDifference}}</span>
        <span v-if="!!scope.row.modelDifference">%</span>
      </template>
    </el-table-column>
    <el-table-column label="制费前毛利率" show-overflow-tooltip width="100px" align="center">
      <template slot-scope="scope">
        <span>{{scope.row.grossProfitMargin}}</span>
        <span v-if="!!scope.row.grossProfitMargin">%</span>
      </template>
    </el-table-column>
    <!-- 产品结构 -->
    <el-table-column label="产品结构" key="productStructure" fixed="right" align="center" width="90px">
      <template slot-scope="scope">
        <el-button type="text" @click="viewProductStructureTable(scope.row, scope.$index)">
          <i class="el-icon-more-outline" title="产品结构"></i>
        </el-button>
      </template>
    </el-table-column>
    <!-- <el-table-column fixed="right" label="操作" key="operate" align="center" width="200px">
      <template slot-scope="scope">
        <el-button type="text" class="button-icon" @click="view(scope.row)">
          <i class="el-icon-view" title="查看"></i>
        </el-button>
        <el-button type="text" class="button-icon" @click="edit(scope.row, scope.$index)">
          <i class="el-icon-edit" title="编辑"></i>
        </el-button>
        <el-button type="text" class="button-icon-del" @click="removeRow(scope.row, scope.$index)">
          <i class="el-icon-delete" title="删除"></i>
        </el-button>
        <el-button type="text" @click="addProduct(scope.row, scope.$index)" class="button-icon">
          <i class="el-icon-plus" title="新增子项"></i>
        </el-button>
        <el-button type="text" @click="feedbackView(scope.row)">
          <i class="el-icon-info" title="历史"></i>
        </el-button>
        <el-button type="text" @click="feedbackHsitoryView(scope.row)">
          <i class="el-icon-location" title="对比"></i>
        </el-button>
      </template>
    </el-table-column> -->
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
    <el-button @click="setCurrent()">取消选择</el-button>
  </div>
</div>
</template>
<script>

import elTableData from './ElTableWithOutItem.json'
export default {
  name: 'HelloWorld',
  data () {
    return {
      list: elTableData.data.mdOfficialOrderItems,
      currentRow: null
    }
  },
  methods: {
    setCurrent (row) {
      this.$refs.singleTable.setCurrentRow(row)
    },
    handleCurrentChange (val) {
      this.currentRow = val
    },
    handleSelectionChange (val) {
      this.selected = val
    },
    // 从订单选择产品
    chooseProductFromOrder () {
      this.productSelectorFromOrderVisible = true
    },
    getAttachUrl (files) {
      if (!files || !files.length) return
      return files[0].url ? files[0].url : files[0].attachUri
    },
    getAttachName (files) {
      if (!files || !files.length) return
      return files[0].name ? files[0].name : files[0].attachName
    },
    previewPic (files) {
      if (!files || !files.length) return
      const url = files[0].url ? files[0].url : files[0].attachUri
      window.open(url)
    },
    handleSizeChange (val) {
      this.listQuery.limit = val
      this.getList()
    },
    getBizOrgName (val) {
      for (const index in this.executionOrgOptions) {
        if (val === this.executionOrgOptions[index].bizOrgId) {
          this.form.bizOrgName = this.executionOrgOptions[index].bizOrgName
          break
        }
      }
    },
    feedbackView (row) {
      this.sourceItemNo = row.officialOrderItemNo
      this.feedbackViewVisible = true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
